<template>
    <div class="wrapper">
        <minbar title="我的" :leftButton="false" :isPadding="true"></minbar>
        <list show-scrollbar="false">
            <cell class="panel">
                <div class="panel-content" @click="login" >
                    <image class="content-img" :src="headData.img"></image>
                    <div class="content-div">
                        <text :class="['content-title',isIos()?'ios-top':'']">{{headData.name}}</text>
                        <text class="content-text">{{headData.label}}</text>
                    </div>
                </div>
                <div class="align-center x-content">
                    <div class="x-order-div">
                        <div class="x-order-title" @click="openPage('order')">
                            <text class="x-order-textleft">我的订单</text>
                            <text class="x-order-textright iconfont">查看更多订单&#xe628;</text>
                        </div>
                        <div class="x-order-content align-center">
                            <div class="x-flex1 align-center x-order-dai" @click="openPage('order')">
                                <div>
                                    <text class="iconfont x-order-icon">&#xe613;</text>
                                </div>
                                <text :class="['x-order-text',isIos()?'':'x-android-top']">待付款</text>
                            </div>
                            <div class="x-flex1 align-center x-order-dai">
                                <div>
                                    <text class="iconfont x-order-icon" style="font-size:45px;top:0px;">&#xe67f;</text>
                                </div>
                                <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:1px;">待发货</text>
                            </div>
                            <div class="x-flex1 align-center x-order-dai">
                                <div>
                                    <text class="iconfont x-order-icon" style="font-size:53px;top:8px;">&#xe64a;</text>
                                </div>
                                <text :class="['x-order-text',isIos()?'':'x-android-top']" style="top:-3px;">待签收</text>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 我的订单 -->
            </cell>
            <cell>
                <!-- 列表 -->
                <x-cell title="生日特权" :topBorder="true" :hasArrow="true" style="margin-top:5px;" @cellClick="openPage('birthday')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:50}">&#xe6a4;</text>
                    </div>
                </x-cell>
                <x-cell title="优惠券" :hasArrow="true" @cellClick="openPage('coupon')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:46,top:3}">&#xe831;</text>
                    </div>
                </x-cell>
                <x-cell title="在线客服" :hasArrow="true">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:42,top:3}">&#xe621;</text>
                    </div>
                </x-cell>
                <x-cell title="现金券" :hasArrow="true" @cellClick="openPage('cash')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:46,top:3}">&#xe61d;</text>
                    </div>
                </x-cell>
                <x-cell title="余额" :hasArrow="true" @cellClick="openPage('balance')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:44,top:2}">&#xe685;</text>
                    </div>
                </x-cell>
                <x-cell title="我的门店(关注过的门店)" :hasArrow="true" @cellClick="openPage('store')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:40,top:0}">&#xe654;</text>
                    </div>
                </x-cell>
                <x-cell title="收货地址" :hasArrow="true" @cellClick="openPage('address')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:40,top:2}">&#xe66e;</text>
                    </div>
                </x-cell>
                <x-cell title="修改密码" :hasArrow="true" :bottomBorder="true" @cellClick="openPage('password')">
                    <div slot="label" class="list-icon">
                        <text class="iconfont cell-icon" :style="{fontSize:43,top:1}">&#xe67b;</text>
                    </div>
                </x-cell>

                <x-cell :topBorder="true" :bottomBorder="true" class="list-margin list-bottom" @cellClick="logout">
                    <div slot="title" class="logout">
                        <text class="logout-text">退出当前账号</text>
                    </div>
                </x-cell>
            </cell>
        </list>
        <!-- 对话框组件 -->
        <x-dialog title="温馨提示"
                content="是否确定退出当前账号?"
                confirm-text="确定"
                cancel-text="取消"
                mainBtnColor="#654d21"
                overlay-can-close="false"
                :show="dialogShow"
                :single="false"
                top=550
                @cancelBtnClick="cancelBtnClick"
                @okBtnClick="okBtnClick">
        </x-dialog>
    </div>   
</template>

<script>
import asCore from "../../common/js/core";
const navigator = weex.requireModule('navigator');
export default {
    components:{
        "minbar" : require("../../common/component/minbar.vue"),
        "button" : require("../../common/component/button.vue"),
        "x-cell" : require("../../common/component/cell.vue"),
        "x-dialog": require("../../common/component/dialog.vue"),
    }, 
    data () {
        return {
            headData :{
                name:"游客",
                label:"登录/注册",
                img:asCore.localpath + "img/duser.png" 
            },
            /**对话框 */
            dialogShow:false
        }
    },
    methods:{
       login(){
           asCore.getToken(token =>{
               if (!token) {
                   navigator.push(asCore.localpath + "login.js");
               }
           });
       },
       getInfo(){
           asCore.post("/member/info",{},(data,msg,flag)=>{
                if(flag==true){
                    this.headData['name'] = data['user_name'];
                    this.headData['label'] = data['group']['name'];
                    this.headData['img'] = "https://m.yunagile.com:442/examples/oa/img/head1.jpg";
                    asCore.setContext(data);
                }else{
                    asCore.toast(msg);
                }
            });
       },
       /* 判断是否是ios */
        isIos(){
            const { platform } = weex.config.env;
            return platform.toLowerCase() === 'ios';
        },
        openPage (type){
            if(type==="password"){  /* 修改密码 */
                navigator.push(asCore.localpath + 'tailor/app/password/changePass.js');
            }else if(type==="birthday"){ /* 生日特权 */
                navigator.push(asCore.localpath + 'tailor/app/myinfo/birthday.js');
            }else if(type==="cash"){ /* 现金券 */
                navigator.push(asCore.localpath + 'tailor/app/myinfo/cash.js');
            }else if(type==="balance"){ /* 余额 */
                navigator.push(asCore.localpath + 'tailor/app/myinfo/balance.js');
            }else if(type==="coupon"){  /* 优惠券 */
                navigator.push(asCore.localpath + 'tailor/app/myinfo/coupon.js');
            }else if(type==="order"){   /* 订单 */
                navigator.push(asCore.localpath + 'tailor/app/myinfo/order.js');
            }else if(type==="address"){ /* 收货地址 */
                navigator.push(asCore.localpath + 'tailor/app/address/address.js');
            }else if(type==="store"){ /* 我关注的门店 */
                navigator.push(asCore.localpath + 'tailor/app/store/mystore.js');
            }
        },
        logout(){
            this.dialogShow = true;
        },
        cancelBtnClick: function() {
            this.dialogShow = false;
        },
        okBtnClick: function() {
            this.dialogShow = false;
            asCore.logout(function(edata) {
                navigator.push(asCore.localpath + "login.js");
            });
        },
        isIos () {
            const { platform } = weex.config.env;
            return platform.toLowerCase() === 'ios';
        }
    }
}
</script>
<style scoped>
.wrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #dedfe1;
  }
.iconfont {
    font-family:iconfont;
}
.align-center {
    align-items: center;
    justify-content: center;
}
.panel {
    height:436px;
    position: relative;
}
.x-content {
    position: absolute;
    height: 245px;
    width: 750px;
    padding-left: 25px;
    padding-right: 25px;
    bottom:0px;
}
.panel-content {
    background-color:#26252b; 
    flex-direction: row;
    padding-left:30px;
    padding-top:30px;
    padding-bottom:110px;
}
.content-img {
    width: 140px;
    height:140px;
    border-radius: 140px;
}
.x-flex1 {
    flex: 1;
}
.content-div {
    flex: 1;
    padding-left:30px;
}
.content-title {
    margin-top:18px;
    color:#fefefe;
    text-overflow:ellipsis;
    lines:1;
    font-size:32px;
    margin-left:10px;
}
.ios-top {
    margin-top:18px;
}
.content-text {
    background-color: #654d21;
    color:#fff;
    margin-top:10px;
    font-size:26px;
    width: 152px;
    padding-left:20px;
    border-radius: 20px;
}
.list-icon {
    height: 55px;
    width: 45px;
    border-radius: 10px;
    margin-right:20px;
    align-items: center;
    justify-content: center;
}
.list-margin {
    margin-top:15px;
}
.list-bottom {
    margin-bottom:15px;
}
.cell-icon {
    color:#654d21;
}
.panel-right {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:84px;
    height: 150px;
}
.panel-right-icon {
    font-size:50px;
    color:#c1c1c1;
}
.panel-right-icon2 {
    font-size:50px;
    color:#c1c1c1;
}
/*我的订单部分*/
.x-order-div {
    background-color: #fff;
    border-radius: 10px;
    width: 700px;
    height: 225px;
}
.x-order-title {
    flex-direction: row;
    height: 80px;
    justify-content: center;
    align-items: center;
    padding-left:20px;
    padding-right: 20px;
    border-bottom-color: #c1c1c1;
    border-bottom-width: 1px;
}
.x-order-title:active {
    background-color: #eee;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.x-order-textleft {
    flex: 1;
    text-align: left;
    font-size: 30px;
    color: #222126;
}
.x-order-textright {
    flex: 1;
    text-align: right;
    font-size: 25px;
    color: #69696b;
}
.x-order-content {
    flex-direction: row;
    height: 140px;
}
.x-order-icon {
    font-size: 50px;
    color: #654d21;
}
.x-order-text {
    color: #222126;
    font-size: 28px;
}
.x-order-dai {
    height: 140px;
}
.x-order-dai:active {
    background-color:#eee; 
}
.logout {
  align-items: center;
  justify-content: center;
}
.logout-text {
  color: #ff3e3e;
  font-size: 30px;
}
.x-android-top {
    padding-top: 15px;
}
</style>